/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

/**
 * 百世官方接口上传网点
 *  */

import React, { useCallback, useRef } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import DragTable from '@/components/DragTable';
import { getKbdbyList, exExcel } from '@/services/KbyzFranchisee';
import { Button } from 'antd';
import ProForm, { ProFormInstance } from '@ant-design/pro-form';
import type { ActionType, ProColumns } from '@ant-design/pro-table';

import type { Kbdby } from './index.d';

import styles from './index.less';

const NoticeVerify: React.FC = () => {
  const actionRef = useRef<ActionType>();
  const formRef = useRef<ProFormInstance>();
  const columns: ProColumns<Kbdby>[] = [
    {
      title: '序号',
      dataIndex: 'id',
      align: 'center',
      search: false,
    },
    {
      title: '提交时间',
      dataIndex: 'create_time',
      align: 'center',
      search: false,
    },
    {
      title: '姓名',
      dataIndex: 'name',
      align: 'center',
      search: false,
    },
    {
      title: '手机号',
      dataIndex: 'mobile',
      align: 'center',
      search: false,
    },
    {
      title: '行业',
      dataIndex: 'industry',
      align: 'center',
      search: false,
    },
    {
      title: '使用接口（多选）',
      dataIndex: 'use_port',
      align: 'center',
      search: false,
    },
    {
      title: '每日调用接口次数',
      dataIndex: 'call_frequency',
      align: 'center',
      search: false,
    },
    {
      title: '希望增加的物流API接口',
      dataIndex: 'hope_add_port',
      align: 'center',
      search: false,
    },
  ];

  const fetchTableList = useCallback((params) => {
    const { current: page_num } = params;
    console.log(page_num);
    return getKbdbyList({
      page_num,
      page_size: 20,
    });
  }, []);

  return (
    <PageContainer className={styles.main} title=''>
      <ProForm
        formRef={formRef}
        layout='inline'
        onFinish={exExcel}
        submitter={{
          render: (props) => {
            return [
              <Button type='primary' key='submit' onClick={() => props.form?.submit?.()}>
                导出
              </Button>,
            ];
          },
        }}
      />
      <DragTable>
        <ProTable<Kbdby>
          className='kb-pro-table'
          actionRef={actionRef}
          pagination={{
            pageSize: 20,
            showQuickJumper: false,
            showSizeChanger: false,
          }}
          rowKey='id'
          request={fetchTableList}
          columns={columns}
          search={false}
          options={false}
          scroll={{ x: 1200 }}
        />
      </DragTable>
    </PageContainer>
  );
};

export default NoticeVerify;
